<template>
  <div>
    <vue-particles
      class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <div class="login-container">
      <h3 class="title">SIK博客管理系统</h3>
      <el-form ref="loginform" :model="userForm" :rules="userRules">
        <el-form-item prop="username">
          <el-input
            v-model="userForm.username"
            prefix-icon="el-icon-user-solid"
            clearable
            placeholder="Username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="userForm.password"
            show-password
            :prefix-icon="this.toggleIcon ? 'el-icon-lock' : 'el-icon-unlock'"
            @blur="handleBlur"
            placeholder="Password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="onSubmit"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { regUsername, regPassword, username, password } from "@/utils/validata";
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!regUsername(value)) {
        callback(new Error("用户名只能由字母或数字或下划线组成"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!regPassword(value)) {
        callback(new Error("密码必须由6到11位大小写字母和数字组成"));
      } else {
        callback();
      }
    };
    return {
      toggleIcon: false,
      userForm: {
        username: "",
        password: "",
      },
      userRules: {
        username: [
          ...username,
          { validator: validateUsername, trigger: "blur" },
        ],
        password: [
          ...password,
          { validator: validatePassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleBlur() {
      if (this.userForm.password != "") {
        this.toggleIcon = true;
      } else {
        this.toggleIcon = false;
      }
    },
    onSubmit() {
      this.$refs.loginform.validate((valid) => {
        if (valid) {
          // 校验成功
          // 发送请求,获取登录ip和地址
          fetch(`/ip/cityjson?ie=utf-8`)
            .then((res) => res.text())
            .then((res) => {
              const data = JSON.parse(res.split("=")[1].replace(";", ""));
              // 1.发送请求/POST/username,password
              // console.log(this);

              this.$http
                .post("/users/login", {
                  ...this.userForm,
                  ip: data.cip,
                  address: "中国 " + data.cname,
                })
                .then((res) => {
                  if (res.code == 0) {
                    // 2.提示消息
                    this.$message({
                      type: "success",
                      message: res.msg,
                      duration: 1000,
                    });
                    // 3.跳转页面
                    sessionStorage.setItem("id", res.result.id);
                    this.$router.push({
                      name: "home",
                    });
                  } else {
                    this.$message({
                      type: "error",
                      message: res.msg,
                      duration: 1000,
                    });
                  }
                });
            });
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码不合法,请重新输入!",
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>
<style lang="stylus">
/* 定制elementUI样式 */
.login-container
  .el-form-item
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    .el-input
      display: inline-block;
      height: 42px;
      .el-input__inner
        height: 42px;
        margin-left: 10px;
        padding: 12px 5px 12px 28px;
        border: none;
        background: transparent;
        font-size:16px
        color: #eee;
        appearance: none;
        border-radius: 0px;
        &::placeholder
          color: #808080
      .el-input__icon
        font-size:18px
</style>
<style lang="stylus" scoped>
.login-bg
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2d3a4b;
  z-index: -1;
.login-container
  width: 420px;
  height: 314px
  position:fixed
  margin: auto;
  left: 0
  right: 0
  top:0
  bottom:0
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  .title
    margin: 0 auto 40px auto;
    font-size: 26px;
    color: #fff;
    text-align: center;
    font-weight: 700;
</style>
